<template>

  <div>
    <!-- 列表信息-->
    <div class="background-white mess-list mem" v-if="!isEdit&&!isAdd">
      <div>
        <div class="mess-list-layout" style="width: 100%">
          <div>
            <el-radio-group v-model="tabPosition" size="mini">
              <el-radio-button label="1">预注册客户</el-radio-button>
              <el-radio-button label="2">已激活客户</el-radio-button>
              <el-radio-button label="3">价值客户</el-radio-button>
              <el-radio-button label="4">已共享客户</el-radio-button>
            </el-radio-group>
          </div>
          <div>
            <el-row>
              <el-button type="danger" @click="selectDelete(multipleSelection)">删除</el-button>
              <el-button type="success" @click="add">添加</el-button>
              <el-button type="info" @click="importExcel">导入</el-button>
            </el-row>
          </div>
        </div>
      </div>
      <div style="margin-top: 16px">
        <el-table
          :data="messData"
          ref="multipleTable"
          style="width: 100%"
          :cell-style="{height:49+'px'}"
          :header-cell-style="{background:'#F3F4F7',color:'#999999'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="客户名称"
            prop="customerName">
          </el-table-column>
          <el-table-column
            label="手机号码"
            prop="phone">
          </el-table-column>
          <el-table-column
            label="单位名称"
            prop="company">
          </el-table-column>
          <el-table-column
            label="备注"
            prop="note">
          </el-table-column>

          <el-table-column
            label="管理"
            width="155"
          >
            <template slot-scope="scope">
              <el-button
                size="medium "
                @click="edit(scope.$index, scope.row)">
                <i class="el-icon-edit"></i>
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top: 30px;text-align: right">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
    </div>

    <!--添加或修改-->
    <div v-if="isEdit||isAdd">
      <update :isEdit="isEdit" :isAdd="isAdd" :editObj="editObj" @deleteRow="deleteRow"></update>
    </div>

    <!--    导入弹框-->
    <el-dialog :before-close="handleClose" :close-on-click-modal="closeModal"
               :visible.sync="dialogExcel"
               height="330px"
               title="文件导入"
               width="464px">
      <div>

        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
          :limit="limit"
          :on-exceed="handleExceed"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :file-list="fileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>

        <div class="import-excel">
          <p style="display: flex;flex-direction: row;align-items: center">
            <i class="el-icon-check" style="color: #cc0000;font-size: 24px;"></i>
            <span style="margin-left: 8px">已成功导入 1122人</span>
          </p>
          <p style="margin-top:8px;margin-bottom: 8px ">获得客户共享次数 3次</p>
          <p style="margin-bottom: 8px">未成功导入<span style="color: #CCCCCC"> 3</span>人</p>
          <div>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="name"
                label="名称"
              >
              </el-table-column>
              <el-table-column
                prop="phone"
                label="手机号码"
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
        <span>&nbsp;</span>
        <el-button @click="dialogExcel = false"
                   style="width: 77px; height: 40px;;margin-top: 16px;background: #cc0000;color: #fff;"
        >关闭
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import {mapMutations, mapState} from 'vuex'
  import update from "./update";

  export default {
    layout: 'frame',
    name: "index",
    components: {
      update
    },
    data() {
      return {
        tabPosition: '1',
        limit: 1,
        fileList: [],
        breadTitle: '客户管理',
        dialogExcel: false, //修改密码dialog
        closeModal: false, //是否点击Mast关闭弹窗

        editObj: {},//编辑对象
        tableData: [{
          phone: '11111111111',
          name: '王小虎',
          address: '上海市普陀区金***'
        }, {
          phone: '11111111111',
          name: '王小虎',
          address: '上海市普陀区金***'
        }, {
          phone: '11111111111',
          name: '王小虎',
          address: '上海市普陀区金***'
        },],
        messData: [
          {
            id: 1,
            customerName: '小明明',
            phone: '11111111111',
            company: '贵州省扶贫基金会',
            note: '备注'
          }, {
            id: 2,
            customerName: '小明明',
            phone: '11111111111',
            company: '贵州省扶贫基金会',
            note: '备注'
          },
          {
            id: 3,
            customerName: '小明明',
            phone: '11111111111',
            company: '贵州省扶贫基金会',
            note: '备注'
          },
          {
            id: 4,
            customerName: '小明明',
            phone: '11111111111',
            company: '贵州省扶贫基金会',
            note: '备注'
          },
          {
            id: 5,
            customerName: '小明明',
            phone: '11111111111',
            company: '贵州省扶贫基金会',
            note: '备注'
          }],
        multipleSelection: [],

      }
    },
    beforeUpdate() {
      this.initInfo()
    },
    computed: {
      //控制是否显示导航
      ...mapState({
        isShowBread: state => state.filter.isShowBread
      }),

      //编辑
      ...mapState({
        isEdit: state => state.filter.isEdit
      }),

      //添加
      ...mapState({
        isAdd: state => state.filter.isAdd
      }),
    },
    methods: {
      ...mapMutations('filter', [
        'SetIsShowBread', 'SetCurrentPath', 'SetIsEdit', 'SetIsAdd'
      ]),
      //初试化
      initInfo() {
        this.SetIsShowBread(true);  //设置面包屑导航是否显示

        //面包屑显示后内容
        if (this.isShowBread && !this.isEdit && !this.isAdd) {
          this.SetCurrentPath({url: '/', title: this.breadTitle});
        } else if (this.isEdit) {
          this.SetCurrentPath({url: '/', title: '编辑客户'});
          this.SetIsEdit(true);
        } else if (this.isAdd) {
          this.SetCurrentPath({url: '/', title: '添加客户'});
          this.SetIsAdd(true);
        }
      },

      //编辑
      edit(index, row) {
        this.SetIsEdit(true);
        this.initInfo();
        this.editObj = row;
      },

      //添加
      add() {
        this.SetIsAdd(true);
        this.editObj = {}
        this.initInfo();
      },
      //导入
      importExcel() {
        this.dialogExcel = true;
      },
      // 关闭弹窗
      handleClose(done) {
        done();
      },

      //列表-批量删除-提示
      selectDelete(rows) {
        if (rows.length > 0) {

          this.$confirm('是否确定删所选客户？')
            .then(_ => {
              this.deleteMethod(rows);
            })
            .catch(_ => {
            });
        } else {//无数据的提示
          this.$confirm('请勾选需要删除的客户？')
            .then(_ => {
            })
            .catch(_ => {
            });
        }
      },

      //删除
      deleteMethod(rows) {
        rows.forEach((row) => {
          this.messData.forEach((initRow, index) => {
            if (row.id == initRow.id) {
              this.messData.splice(index, 1)
              //请求

            }
          })
        });
      },

      //来自编辑的删除
      deleteRow(options) {
        this.$confirm('是否确定删除该客户？')
          .then(_ => {
            let id = options.id;
            this.messData.forEach((initRow, index) => {
              if (id == initRow.id) {
                this.messData.splice(index, 1);
                this.SetIsEdit(false);
                this.initInfo()
                //请求
              }
            })
          })
          .catch(_ => {
          });
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },

      handleExceed(files, fileList) {

        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },

      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },

      //总操作数据源
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    },
  }
</script>

<style lang="scss">
  .import-excel {
    border-top: 1px solid #f2f2f2;
    margin-top: 16px;
    padding-top: 16px;
    margin-bottom: 16px;

    p {
      font-size: 14px;
    }
  }
</style>
